<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>测试原生xhr是异步代码</button>
    <script>
      // 异步函数 不会阻塞主线程的代码的执行
      //   console.log(1)
      //   setTimeout(() => {
      //     console.log(2)
      //   }, 1000)
      //   console.log(3)
      // 1 3 2

      // 验证原生的xhr也是异步
      //   document.querySelector('button').onclick = function () {
      //     console.log(1)
      //     // 1.实例化异步对象 浏览器内置的 不刷新页面直接发送请求
      //     const xhr = new XMLHttpRequest()
      //     // 2.设置请求的 地址 和方法
      //     xhr.open('get', 'http://ajax-api.itheima.net/api/robot?spoken=吃饱了没')
      //     // 3.注册回调函数 服务器响应内容回来之后触发
      //     xhr.addEventListener('load', function () {
      //       console.log(xhr.response)
      //       console.log(2)
      //     })
      //     // 4.发送请求
      //     xhr.send()
      //     console.log(3)
      //   }
      // 1 3 2

      // 异步嵌套：异步函数嵌套异步函数 层层嵌套
      //   setTimeout(() => {
      //     console.log(1)
      //     setTimeout(() => {
      //       console.log(2)
      //       setTimeout(() => {
      //         console.log(3)
      //       }, 3000)
      //     }, 2000)
      //   }, 1000)
      // xhr的异步嵌套 回调地域
      document.querySelector('button').onclick = function () {
        const xhr = new XMLHttpRequest()
        xhr.open('get', 'http://ajax-api.itheima.net/api/robot?spoken=吃饱了没')
        xhr.addEventListener('load', function () {
          console.log(xhr.response)
          // 回复完我问题
          const xhr1 = new XMLHttpRequest()
          xhr1.open(
            'get',
            'http://ajax-api.itheima.net/api/robot?spoken=喝饱了没'
          )
          xhr1.addEventListener('load', function () {
            console.log(xhr1.response)
            // 回复完我问题
            const xhr2 = new XMLHttpRequest()
            xhr2.open(
              'get',
              'http://ajax-api.itheima.net/api/robot?spoken=睡醒了没'
            )
            xhr2.addEventListener('load', function () {
              console.log(xhr2.response)
            })
            xhr2.send()
          })
          xhr1.send()
        })
        xhr.send()
      }
    </script>
  </body>
</html>
